import React from 'react';
import { LeftOutline, DeleteOutline, CheckCircleFill } from 'antd-mobile-icons';
import style from '../Lyf/HeartPage.module.css';
import yf from '../Lyf/img/yf.png'
import {useNavigate} from 'react-router-dom'


export default function HeartPage() {
    // 模拟收藏商品数据
    const navigate=useNavigate()
    const favoriteItems = [
        { id: 1, name: "JABUSHE 嘉碧茜抗皱眼霜修护淡化细纹黑眼圈眼袋提拉紧致女...", collected: "1000+人收藏", price: "¥4.99", checked: true },
        { id: 2, name: "JABUSHE 嘉碧茜抗皱眼霜修护淡化细纹黑眼圈眼袋提拉紧致女...", collected: "1000+人收藏", price: "¥4.99", checked: false },
        { id: 3, name: "JABUSHE 嘉碧茜抗皱眼霜修护淡化细纹黑眼圈眼袋提拉紧致女...", collected: "1000+人收藏", price: "¥4.99", checked: false },
        { id: 4, name: "JABUSHE 嘉碧茜抗皱眼霜修护淡化细纹黑眼圈眼袋提拉紧致女...", collected: "1000+人收藏", price: "¥4.99", checked: true },
        { id: 5, name: "JABUSHE 嘉碧茜抗皱眼霜修护淡化细纹黑眼圈眼袋提拉紧致女...", collected: "1000+人收藏", price: "¥4.99", checked: false },
        { id: 6, name: "JABUSHE 嘉碧茜抗皱眼霜修护淡化细纹黑眼圈眼袋提拉紧致女...", collected: "1000+人收藏", price: "¥4.99", checked: true },
        { id: 7, name: "JABUSHE 嘉碧茜抗皱眼霜修护淡化细纹黑眼圈眼袋提拉紧致女...", collected: "1000+人收藏", price: "¥4.99", checked: false },
    ];

    return (
        <div className={style.container}>
            {/* 顶部导航栏 */}
            <div className={style.header}>
                <LeftOutline className={style.backIcon} onClick={()=>navigate('/my')} />
                <h1 className={style.title}>商品收藏</h1>
                <DeleteOutline className={style.deleteIcon} />
            </div>
            
            {/* 商品收藏列表 */}
            <div className={style.favoriteList}>
                {favoriteItems.map(item => (
                    <div key={item.id} className={style.favoriteItem}>
                        {item.checked ? (
                            <CheckCircleFill className={style.checkIcon} style={{ color: 'red' }} />
                        ) : (
                            <div className={style.uncheckedIcon}></div>
                        )}
                        <img 
                            src={yf}
                            alt={item.name} 
                            className={style.productImage}
                        />
                        <div className={style.productInfo}>
                            <h3 className={style.productName}>{item.name}</h3>
                            <p className={style.collected}>{item.collected}</p>
                            <p className={style.price}>{item.price}</p>
                        </div>
                    </div>
                ))}
            </div>
            
            {/* 底部全选栏 */}
            <div className={style.footer}>
                <div className={style.selectAll}>
                    <div className={style.checkboxContainer}>
                        <div className={style.checkbox}></div>
                    </div>
                    <span>全选</span>
                </div>
            </div>
        </div>
    );
}